<template>
  <a-spin :spinning="confirmLoading" >
    <a-row>
      <a-col :span="8">
        <a-carousel arrows v-if="imgList1" :autoplay="true" >
          <div
            slot="prevArrow"
            slot-scope="props"
            class="custom-slick-arrow"
            style="left: 10px;zIndex: 1"
          >
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
          </div>
          <div v-for="(i,index) in imgList" class="pic" @click="lunbo(index)">
            <img :src="i">
          </div>

        </a-carousel>
        <a-carousel arrows v-else>
          <div>
            <h3 style="color:#00A0E9">暂无图片</h3>
          </div>
        </a-carousel>
      </a-col>
      <a-col :span="11">
        <div class="details-box">
          <div class="level-2-0">
            <span class="level-2">{{this.model.propertyName}}</span>
            <div>
              <a-tag color="#108ee9" v-if="this.model.type==1">应收账款</a-tag>
              <a-tag color="#108ee9" v-else-if="this.model.type==2">不良资产</a-tag>
              <a-tag color="#108ee9" v-else-if="this.model.type==3">信贷资产</a-tag>
              <a-tag color="#108ee9" v-else>非信贷资产</a-tag>
            </div>
          </div>
          <div>
            <span class="level-1">项目编号：{{this.model.propertyNo}}</span>
<!--            <span class="level-1 mg-1">项目发布日期：{{this.model.enrollStartTime}}</span>-->
          </div>
          <div class="qudaofang">
            <span class="level-1">渠道方：{{this.model.channelName}}</span>
            <span class="level-1">地区：{{getPcaText(model.city)}}</span>
          </div>


          <div class="level-3-0">

            <span class="level-3">挂牌价：<span class="level-3-1" style="font-size: 24px">{{this.model.listingPrice}}</span>万元</span>
            <span class="level-3 mg-2">保证金：<span class="level-3-1" style="font-size: 21px;color: #9e9e9e">{{this.model.earnestMoney}}</span>元</span>
          </div>

        </div>
      </a-col>
      <a-col :span="5">
        <div class="details-box">
          <!--<span class="level-4-1">距离开始:</span>
          <count-down
            ref="jishiqi"
            v-if="showjishiqi"
            class="level-4-2"
            :target="endTime"
            :on-end="onEndHandle">
          </count-down>-->
          <div class="zi">
            <span>报名开始：</span>
            <span>{{this.model.enrollStartTime?this.model.enrollStartTime:'------'}}</span>
          </div>
          <div class="zi">
            <span>报名结束：</span>
            <span>{{this.model.enrollEndTime?this.model.enrollEndTime:'------'}}</span>
          </div>
          <div class="zi">
            <span>竞拍开始：</span>
            <span>{{this.model.auctionStartTime?this.model.auctionStartTime:'------'}}</span>
          </div>
          <div class="zi">
            <span>竞拍结束：</span>
            <span>{{this.model.auctionEndTime?this.model.auctionEndTime:'------'}}</span>
          </div>
        </div>
      </a-col>
    </a-row>
    <div>
      <a-tabs default-active-key="1" >
        <a-tab-pane key="1" tab="交易须知">
          <div v-html="model.tradingInstruction" class=""></div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="项目详情" force-render>
          <div v-html="model.propertyDetail" class=""></div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!--<a-row style="margin-top: 25px;margin-bottom: 25px;">
      <a-col :span="4">
        <span class="level-2">交易须知</span>
      </a-col>
    </a-row>-->
    <!--<a-row>
      <a-col :span="24">
        <div v-html="model.tradingInstruction" class=""></div>
      </a-col>
    </a-row>-->
    <!--<a-row style="margin-top: 25px;margin-bottom: 25px;">
      <a-col :span="4">
        <span class="level-2">项目详情</span>
      </a-col>
    </a-row>-->
    <!--<a-row>
      <a-col :span="24">
        <div v-html="model.propertyDetail" class=""></div>
      </a-col>
    </a-row>-->
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()" >
      <img alt="example" style="width: 100%" :src="previewImage"/>
    </a-modal>
  </a-spin>
</template>

<script>
  import CountDown from '@/components/CountDown/CountDown'
  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import JDate from '@/components/jeecg/JDate'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import JEditor from '@/components/jeecg/JEditor'
  import JAreaLinkagePca from '@/components/jeecg/JAreaLinkagePca'
  import AreaPca from '@/components/_util/AreaPca'
  const baseUrl =
    'https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/';
  export default {
    name: 'PropertyEditForm',
    components: {
      JFormContainer,
      JDate,
      JDictSelectTag,
      JEditor,
      JAreaLinkagePca,
      CountDown
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },

    data () {
      return {
        previewVisible:false,
        previewImage:'',
        baseUrl,
        form: this.$form.createForm(this),
        model: {},
        imgList1:false,
        imgList:[],
        showjishiqi:false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          propertyNo: {
            rules: [
              { required: true, message: '请输入资产编号!'},
            ]
          },
          propertyName: {
            rules: [
              { required: true, message: '请输入名称!'},
            ]
          },
          propertyDetail: {
            rules: [
              { required: true, message: '请输入资产详情!'},
            ]
          },
          listingPrice: {
            rules: [
              { required: true, message: '请输入挂牌价格!'},
            ]
          },
          province: {
            rules: [
              { required: true, message: '请输入省!'},
            ]
          },
          city: {
            rules: [
              { required: true, message: '请输入市!'},
            ]
          },
          enrollStartTime: {
            rules: [
              { required: true, message: '请输入报名开始时间!'},
            ]
          },
          enrollEndTime: {
            rules: [
              { required: true, message: '请输入报名结束时间!'},
            ]
          },
        },
        url: {
          add: "/property/add",
          edit: "/property/edit",
          queryById: "/property/queryById",
          remark:'/property/propertyApprove'
        },
        remarkStateStr:1,//审核 拒绝or同意 状态
        remark:'',  //意见
        details:true,
        realName:'',
        tel:'',
        endTime:new Date().getTime(),
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
      this.pcaData = new AreaPca()

    },
    mounted() {
      // console.log('this.endTime',this.endTime)
    },
    methods: {
      getPcaText(code){
        return this.pcaData.getText(code);
      },
      formatTime(){
        console.log('this.model.enrollEndTime',this.model.enrollEndTime)
        /*if (this.model.enrollEndTime){
          return this.model.enrollEndTime.replace('-','/')
        }else {
          return new Date().getTime()-1000
        }*/
        return this.model.enrollEndTime.replace('-','/')
      },

      add () {
        this.edit({});
      },
      edit (record) {
        console.log('record',record.enrollEndTime)
        /*getAction(this.url.queryById, { id:record.id }).then((res)=>{
          console.log('res',res)
          if(res.code==200){
            this.imgList = res.result.imgList
          }else {
            this.$message.error('获取渠道方信息出错')
          }
        })*/
        if (record.imgList){
          this.imgList1 = true
        }else {
          this.imgList1 = false
        }

        this.imgList = record.imgList
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.$nextTick(()=>{
          // this.$refs.jishiqi.initTime()
          // this.$refs.jishiqi.tick()
        })
        /*if (record.enrollEndTime){
          let timetime = record.enrollEndTime.split('-')
          let timetime1 = timetime.join('/')
          console.log('timetime1',timetime1)
          this.$nextTick(()=>{
            this.endTime = new Date(timetime1).getTime()
          })

          // console.log('this.endTime',this.endTime)
        }else {

          this.endTime = new Date().getTime()-1000
        }*/
        this.visible = true;

      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values,{province:this.province,city:this.city});
            console.log("表单提交数据",formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'propertyNo','type','propertyName','listingPrice','earnestMoney','enrollStartTime','enrollEndTime'))
      },

      //省市联动
      areaChange(e){
        // console.log(e)
        this.province = e[0]
        this.city = e[1]
      },

      //审批：同意/拒绝
      remarkState(e){
        this.remarkStateStr = e.target.value
      },

      //提交审核
      submitRemark(){
        console.log('this.remarkStateStr',this.remarkStateStr)
        console.log('this.remark',this.remark)

          if (this.remarkStateStr == 0 && this.remark == ''){
            this.$message.error('请填写审批意见！')
          }else {
            this.confirmLoading = true
            let formData = {
              state:this.model.state,
              agree:this.remarkStateStr,
              remark:this.remark,
              propertyId:this.model.id
            }
            httpAction(this.url.remark,formData,'post').then((res)=>{
              console.log(res)
              // debugger
              if(res.success){

                this.remark = ''
                this.$message.success(res.message);
                this.$emit('ok');
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
              this.confirmLoading = false;
            })
          }

      },
      onEndHandle () {
        // this.$message.success('已结束！')
      },

      //查看轮播
      lunbo(e){
        console.log(e)
        this.previewVisible = true
        this.previewImage = this.imgList[e]
      },
      //关闭轮播重置事件
      handleCancel(){
        this.previewImage = ''
        this.previewVisible = false
      }
    }
  }
</script>
<style scoped>
  .box1{
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    padding: 20px;
  }
  .ant-carousel{width: 330px;height: 180px;background: #fff;
    border: 1px solid #e1e1e1;}
  .ant-carousel >>> .slick-slide {
    text-align: center;
    width: 100%;
    height: 200px;
    line-height: 160px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .ant-carousel >>> .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
  }
  .ant-carousel >>> .custom-slick-arrow:before {
    display: none;
  }
  .ant-carousel >>> .custom-slick-arrow:hover {
    opacity: 0.5;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }

  .details-box{
    display: flex;
    flex-direction: column;
  }
  /*.details-box>div{
    display: flex;
    flex-direction: row;
  }*/
  .level-1{
    font-size: 14px;
    color: #333333;
  }
  .mg-1{
    margin-left: 44px;
  }
  .level-2-0{
    /*margin-top: 15px;*/
    /*margin-bottom: 11px;*/
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .level-2-0>div{margin-left: 20px}
  .level-2{
    color: #333333;
    font-size: 22px;
    font-weight: bold;

  }
  .level-3{
    color: #333333;
    font-size: 16px;
  }
  .level-3-0{
    width: 470px;
    height: 60px;
    background: #FAFAFA;
    border-radius: 4px;
    margin-top: 20px;
    padding-left: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .level-3-1{
    /*font-size: 24px;*/
    color: #D10000;
    font-weight: bold;

  }
  .mg-2{
    margin-left: 53px;
  }
  .level-4-1{
    font-size: 16px;
    margin-bottom: 10px;
  }
  .level-4-2{
    color: #D10000;
    font-size: 24px;
    font-weight: bold;
  }
  .pic{display: flex !important;flex-direction: row;align-items: center;justify-content: center;}
  .pic>img{width: 330px;display: block;}
  .zi{
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
  }

  .zi>span>span{
    color: #000;
  }

  .qudaofang{
    display: flex;
    flex-direction: column !important;
    margin-top: 10px;
    border-top: 1px solid #e5e5e5;
    padding-top: 10px;
    width: 85%;
  }
</style>